<script setup lang="ts">
import type { loginChangePasswordRequest } from '@/types/api/user'
import { userApi } from '@/request/api'
import { useProfile } from '@/stores'
import { useHideLoading, useLoading, useNav, useToast } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { reactive, ref } from 'vue'
import {
  coerce as zcoerce,
  number as znumber,
  object as zobject,
  string as zstring,
} from 'zod'

const form = reactive<loginChangePasswordRequest>({
  passwordOld: '',
  password: '',
  confirmPassword: '',
})
const profile = useProfile()
async function handleVerPassWord() {
  const zparse = zobject({
    passwordOld: zstring().trim().min(1, { message: '请输入原密码' }),
  }).safeParse(form)
  if (!zparse.success) {
    return
  }
  useLoading(true)
  const [err, res] = await to(userApi.verifyPassword(form.passwordOld))
  useHideLoading()
  if (err) {
    return
  }
  if (!res) {
    useToast('原密码验证失败')
    return
  }
  useToast('原密码验证成功')
}

async function handleSubmit() {
  const zparse = zobject({
    passwordOld: zstring().trim().min(1, { message: '请输入原密码' }),
    password: zstring().trim().min(1, { message: '请输入密码' }),
    confirmPassword: zstring().trim().min(1, { message: '请输入确认密码' }),
  }).safeParse(form)
  if (!zparse.success) {
    return useToast(zparse.error.issues[0].message)
  }
  if (zparse.data.password !== zparse.data.confirmPassword) {
    return useToast('两次密码不一致')
  }
  useLoading(true)
  const [err, res] = await to(userApi.changePassword(zparse.data))
  useHideLoading()
  if (err) {
    return
  }

  profile.clear()
  useToast('密码修改成功，请重新登录')
  useNav('/me/login')
}
</script>

<template>
  <view class="px-30px py-20px">
    <view class="overflow-hidden rd-16px bg-white pl-20px">
      <uni-forms :model-value="form">
        <uni-forms-item class="" label="原密码" name="name">
          <input
            v-model="form.passwordOld"
            class="h-100px text-26px"
            type="password"
            placeholder="原密码"
            @blur="handleVerPassWord"
          >
        </uni-forms-item>
        <uni-forms-item class="" label="新密码" name="phone">
          <input
            v-model="form.password"
            class="h-100px text-26px"
            type="password"
            maxlength="11"
            placeholder="新密码"
          >
        </uni-forms-item>
        <uni-forms-item class="" label="确认密码" name="identNumber">
          <input
            v-model="form.confirmPassword"
            class="h-100px text-26px"
            type="password"
            placeholder="确认密码"
          >
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
  <view class="fixed bottom-0 w-full flex bg-white pt-15px safe-pb-15px">
    <view
      class="btn-primary-black mx-a w-600px text-36px lh-80px"
      @click="handleSubmit"
    >保存</view>
  </view>
</template>

<style lang="less" scoped>
:deep(.uni-forms) {
  .uni-forms-item {
    --uno: 'items-center b-b-gray-300 b-b-solid !mb-0';
    height: 100rpx;
    border-bottom-width: 1rpx;
  }
}
</style>
